import { createApp } from 'vue'
import App from './App.vue'
import './style.css'
import router from './router'
import store from './store'
import VueLazyload from 'vue3-lazyload'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import axios from '@/plugins/axios.js'
import request from "./utils/request";
import * as ElIconModules from '@element-plus/icons-vue'
import VueVideoPlayer, {VideoPlayer} from 'vue-video-player'
import 'video.js/dist/video-js.css'


const app = createApp(App);
app.config.globalProperties.$axios=axios;
app.config.globalProperties.request = request
// element图标全局导入
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(store)
    .use(VueVideoPlayer)
.use(router)
// 图片懒加载时的图片
.use(VueLazyload,{
    preLoad: 1.3,
    error: require('@/assets/loading-imgs/err.jpg'),
    loading: require('@/assets/loading-imgs/loading.svg'),
    attempt: 1
})
.use(ElementPlus)
    .use(VideoPlayer)
.mount('#app')
// 全局注册element-plus icon图标组件
Object.keys(ElIconModules).forEach((key) => {
    app.component(key, ElIconModules[key]);
});


// 解决element视窗大小调整ResizeObserver问题
const debounce = (fn, delay) => {
    let timer = null;
    return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }
}

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
    constructor(callback) {
        callback = debounce(callback, 16);
        super(callback);
    }
}
